<script setup lang="ts">
import { ref } from "vue"
import { Action, ElMessageBox } from "element-plus"
import router from "../../../router"
import { CreateTrain } from "../../../api/train"

const emit = defineEmits(["changState"])
const name = ref("")
const createTrain = function () {
  ElMessageBox.alert(`将创建主题为${name.value}的培训，是否创建？`, "Title", {
    confirmButtonText: "创建",
    callback: async (action: Action) => {
      if (action == "confirm") {
        const res = await CreateTrain({
          name: name.value,
          files: "",
          screenVideo: "",
          cameraVideo: "",
          finishTime: new Date(),
          employees: ""
        })
        if (res.ret) {
          emit("changState", {
            state: 1,
            id: res.data
          })
        }
      }
    }
  })
}
const returnHome = function () {
  ElMessageBox.alert(`返回将取消本次会议，是否继续？`, "警告", {
    confirmButtonText: "返回",
    callback: (action: Action) => {
      if (action == "confirm") {
        router.push("/")
      }
    }
  })
}
</script>

<template>
  <div class="name">
    <el-button @click="returnHome"> 返回</el-button>
    <h1 class="text-5xl">请输入培训主题</h1>
    <el-input v-model="name" style="width: 60%; margin: 30px; height: 50px" />
    <el-button v-if="name.length > 0" type="primary" style="width: 30%" @click="createTrain">
      下一步
    </el-button>
  </div>
</template>

<style scoped>
.name {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
</style>
